import { useEffect, useRef, useState } from "react"
// import { IfElse } from "../IfElse/IfElse"
import clsx from "clsx"
import { NewTaskCard } from "./NewTaskCard"
import { Button } from "../ui/button"
import useInputFocusContext from "@/context/InputFocusContext"
import useNewTaskCardContext from "@/context/NewTaskCardsShowContext"

interface Props {
  className?: string;
  classNameNewTask?: string;
  columnId: string;
  children?: React.ReactNode;
  name: string;
}

export const NewTaskButton = ({ className, columnId, children, classNameNewTask, name }: Props) => {
  const [newTask, setNewTask] = useState<boolean>(false)
  const { focusInput } = useInputFocusContext();
  const { registerCard, showCard } = useNewTaskCardContext()

  const taskCard = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (taskCard !== null) registerCard(name, taskCard.current);
  }, [name, taskCard]);

  return <div className={clsx('z-[5] w-full ', className)}>
    {children ? <div className="w-auto" onClick={() => {
      setNewTask(true)
      focusInput(name)
      showCard(name)
    }}>
      {children}
    </div> : <Button
      className='border-r sticky w-full border border-dashed border-slate-400 p-3 text-slate-400 '
      onClick={() => {
        setNewTask(true)
        focusInput('newTaskInColumnHeader')
        showCard(name)
        console.log('first')
      }}
      variant={'ghost'}
    >
      Добавить задачу
    </Button>}

    <div ref={taskCard} className={clsx(classNameNewTask, newTask ? 'visible' : 'invisible')} >
      <NewTaskCard columnId={columnId} setOpen={setNewTask} name={name} />
    </div>

  </div >

}